<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jxj :: NXGestureSlider </title>
<style>
body
{
	margin:0px;
	padding:0px;
}

#NSViewSliderStage
{
	position: relative;
	display: inline-block;
	overflow:hidden;
	margin:0px;
	padding:0px;
	width: 80%;
	height: 400px;
	border: solid 1px #000;
}
#NSViewSliderStage .board
{
	margin:0px;
	padding:0px;
	background-color:#063;
}
#NSViewSliderStage .page
{
	display: inline-block;
	background-color:#39C;
}
.CSSLabel {
	color: #F0F;
	font-weight: bold;
}
.BoardLabel {
	color: #063;
	font-weight: bold;
}
.PageLabel {
	font-weight: bold;
	color: #39C;
}
.MethodSpan {
	font-weight: bold;
	color: #06F;
}
#controllBox
{
	text-align:center;
}
.myContent
{
	font-size: 90px;
	font-weight: 600;
}

</style>
<script src="../libs/gs/TweenMax.js"></script>
<script src="../com/jxj/js/NXGestureCapture.js"></script>
<script src="../com/jxj/js/NXViewSlider.js"></script>
<script src="../com/jxj/js/NXGestureSlider.js"></script>
<script type="text/javascript">
// [ 응용 샘플 ]
var _nxSlider;

window.onload = function()
{
	// 컨텐츠 리스트 정의
	// Array.<DIV Element>
	var _myContents 	= [];
	var _list					= document.getElementsByClassName( "myContent" );
	for( var i=0; i<_list.length; i++ )
	{
		_myContents.push( _list[i] );
	}
	// 슬라이더 객체 생성
	var _sliderStage						= document.getElementById( "NSViewSliderStage" );
	_nxSlider								= new NXGestureSlider( _sliderStage );
	_nxSlider.onTweenComplete 	= onSliderTweenComplete;
	_nxSlider.setSlides( _myContents );
	updatePages();
	
	//
	var _btn = document.getElementById( "a" );
	_btn.addEventListener( "mousedown", sampleClick, true);
	_btn.addEventListener( "touchstart", sampleClick);
	//_btn.addEventListener( "touchend", sampleClick);
	
}

// 버튼 이벤트
function onClickPop( e )
{
	_nxSlider.prev();
}
function onClickPush( e )
{
	_nxSlider.next();
}
function onClickIndex( e )
{
	var _index = parseInt( document.getElementById( "txt_index" ).value );
	_nxSlider.setPageIndex( _index );
}
// [ 트윈 완료 콜백 ]
function onSliderTweenComplete()
{
	//console.log( "onSliderTweenComplete", _nxSlider );
	updatePages();
}
function updatePages()
{
	document.getElementById( "pages" ).innerHTML = _nxSlider.currentPage() + "/" + _nxSlider.totalPages();
}

function sampleClick( e )
{
	alert( "sample Click ! "+ e.type +"/"+ e.currentTarget.value );
}


</script>

</head>

<body>
<h1>NXGestureSlider</h1>
<br>
Swipe the slider view!
<hr>
<div style="width:100%;text-align:center">
    <div id="NSViewSliderStage">
    </div>
</div>
<div id="controllBox">
<input type="button" value="<<" onClick="onClickPop(event)"/>
<span id="pages">0/10</span>
<input type="button" value=">>" onClick="onClickPush(event)"/>
page index:<input type="text" value="1" id="txt_index" ><input type="button" value="go page" onClick="onClickIndex(event)"/>
</div>
<hr>
<p>
[Propoerties]
  <br>
  currentPage() : 현재 페이지
  <br>
  totalPages() : 전체 페이지
</p>
<p>
[Method]<br>
<span class="MethodSpan">function</span> setSlides( pageList ) : View 영역에 보여질 컨텐츠 리스트<br>
<span class="MethodSpan">function</span> prev() : 이전 슬라이드<br>
<span class="MethodSpan">function</span> next() : 다음 슬라이드<br>
<span class="MethodSpan">function</span> setPageIndex( pageIndex ) : 페이지이동 (단,pageIndex 는 0 이상의 정수 )<br>
</p>
<p>
[Call Back Function] 
  <br>
onTweenComplete : 슬라이드 모션 효과가 종료되었을때 호출
</p>
여백등은 <span class="CSSLabel">CSS</span>를 통해 수정가능. <br>
<span class="CSSLabel">CSS1</span> : 녹색영역 <span class="BoardLabel">board</span> 클래스 <br>
<span class="CSSLabel">CSS2</span> : 하늘색영역 <span class="PageLabel">page</span> 클래스 <br>


<div style="visibility:hidden; height:0px; overflow:hidden">
    <div class="myContent">Content 1<input id="a" type="button" value="Buttonasdfasdf" ></div>
    <div class="myContent">Content 2</div>
    <div class="myContent">Content 3</div>
    <div class="myContent">Content 4</div>
    <div class="myContent">Content 5</div>
    <div class="myContent">Content 6<input type="button" value="Button2" onClick="sampleClick(event)"></div>
    <div class="myContent">Content 7</div>
    <div class="myContent">Content 8</div>
    <div class="myContent">Content 9<input type="button" value="Button3" onClick="sampleClick(event)"></div>
    <div class="myContent">Content 10</div>
</div>
</body>
</html>
